<template>
  <VPage class="p-[0px]">
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #operation="{ row }">
        <el-button link type="primary" @click="handleDownload(row.id)" v-if="row.status == 2">
          {{ row.is_download == 1 ? "重新下载" : "下载" }}
        </el-button>
      </template>
      <template #status="{ row }">
        <div class="text-[#666] mr-[16px] flex">
          <template v-if="row.status === 1">
            <span class="text-[#00ac76]">
              <i class="main-iconfont icon-state_underway_line"></i>
            </span>
            <span class="ml-[2px] text-[var(--base-sub-text-color)]">生成中</span>
          </template>
          <template v-if="row.status === 2">
            <span class="text-[#3487FF]">
              <i class="main-iconfont icon-state_finish_line"></i>
            </span>
            <span class="ml-[2px] text-[var(--base-sub-text-color)]">已完成</span>
          </template>
          <template v-if="row.status === 3">
            <span class="text-[#FF0000]">
              <i class="main-iconfont icon-state_fail_line"></i>
            </span>
            <span class="ml-[2px] text-[var(--base-sub-text-color)]">失败</span>
          </template>
        </div>
      </template>
      <template #title="{ row }">
        <VText :value="row.title" />
        <div class="remark" v-if="row?.remark">
          <VText :value="row?.remark"></VText>
        </div>
      </template>
    </VTable>
  </VPage>
</template>
<script setup lang="jsx">
import { exportRecord, exportRecordDownload, exportRecordAttr } from "@/api/system/user"

const tableRef = ref()
// 查询
const query = () => {
  tableRef?.value.query()
}

const handleDownload = async (id) => {
  exportRecordAttr(id, { is_download: 1 })
  const { data } = await exportRecordDownload({ id })
  if (data?.url) {
    window.open(data.url, "noopener", "noreferrer")
  }
  nextTick(() => query())
}

const tableOptins = reactive({
  formConfig: {
    data: {},
  },
  scrollY: { enabled: false },
  showOverflow: true,
  columns: [
    // { fixed: "left", width: 50, type: "checkbox" },
    { fixed: "left", width: 70, title: "ID", field: "id" },
    {
      title: "所属模块",
      width: 130,
      field: "home_system_desc",
    },
    {
      title: "文件名",
      minWidth: 200,
      field: "title",
      slots: {
        default: "title",
      },
    },
    // {
    //   title: "备注",
    //   width: 200,
    //   field: "remark",
    // },
    {
      title: "状态",
      width: 100,
      field: "status_desc",
      slots: { default: "status" },
    },
    { title: "任务创建时间", width: 170, field: "create_time" },
    { title: "完成时间", width: 170, field: "success_time" },
    {
      title: "操作",
      width: 180,
      fixed: "right",
      align: "center",
      slots: { default: "operation" },
    },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: ({ page, form }) => {
        return exportRecord({ ...page, ...form }).then((res) => {
          return res
          // return {
          //   data: res.data,
          //   total: res.total,
          // };
        })
      },
    },
  },
})
defineExpose({
  query,
})
</script>
<style lang="scss" scoped>
.remark {
  :deep(.v-text-content) {
    color: red;
  }
}
</style>
